<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" style="width: 100px;height: 100px;border: solid 1px;">
    container
</div>
<script>
    // vue2中的使用方式
    // let observe = new MutationObserver(flushCallbacks);
    // let textNode = document.createTextNode(1);
    // observe.observe(textNode, {
    //     characterData: true
    // });
    // timerFunc = () => {
    //     textNode.textContent = 2;
    // }

    // test
    function handler(nodes) {
        console.log('nodes', nodes);
    }
    const containerNode = document.querySelector('#container');
    const observer = new MutationObserver(handler);
    observer.observe(containerNode, {
        attributes: true,
        subtree: true,
        characterData: true,
        childList: true
    })
</script>
</body>
</html>
